<template>
  <div class="followings_wrapper">
    <div class="followings_list" v-for="(item,index) in followings" :key="index">
      <router-link :to="'/user/'+item.uid" target="_blank">
        <!-- 用户头像 -->
        <div class="followings_avatar">
          <img :src="item.userAvatar" alt />
        </div>
        <!-- 用户信息 -->
        <div class="followings_info">
          <h1 class="followings_username">{{item.username}}</h1>
          <div class="followings_email">{{item.email}}</div>
        </div>
        <!-- 关注按钮 -->
        <div class="followings_follow" v-if="isMe(item.uid)">
          <Button
            :type="!item.isfollow ? 'default':'primary'"
            long
            @click.prevent="changeFollow(item.isfollow,item.uid,index)"
          >{{!item.isfollow ? '关注' :'已关注'}}</Button>
          <!-- {{item.isfollow}} -->
        </div>
      </router-link>
    </div>
    <NoMore v-if="this.end && this.followings.length == 0" />
  </div>
</template>

<script>
import NoMore from "@/components/NoMore.vue";
export default {
  name: "Followings",
  components: {
    NoMore
  },
  data() {
    return {
      peopleid: this.$route.params.uid,
      loading: false,
      end: false,
      followings: [],
      currentsize: 0
    };
  },
  watch: {
    $route(val) {
      this.peopleid = val.params.uid;
    },
    peopleid(val) {
      this.$set(this, "followings", []);
      this.$set(this, "currentsize", 0);
      this.getFollowing(true, val, 20, this.currentsize);
    }
  },
  computed: {
    isMe() {
      let myid = this.$store.state.user.uid;
      return function(id) {
        return myid !== id;
      };
    }
  },
  methods: {
    getFollowing(isclear, peopleid, size, currentsize) {
      if (!this.loading) {
        this.loading = true;
        let myid = this.$store.state.user.uid;
        this.$axios
          .get("/getfollowing", {
            params: {
              myid: myid,
              peopleid: peopleid,
              size: size,
              currentsize: currentsize
            }
          })
          .then(res => {
            this.loading = false;
            if (isclear) {
              this.currentsize = res.data.data.length;
              this.followings = res.data.data;
            } else {
              this.currentsize += res.data.data.length;
              this.followings = this.followings.concat(res.data.data);
            }

            if (res.data.data.length < size) {
              this.end = true;
            } else {
              this.end = false;
            }
          })
          .catch(err => {
            console.log(err.response);
          });
      } else {
        return false;
      }
    },

    //鼠标滚动异步请求数据
    scroll() {
      window.onscroll = () => {
        // 距离底部200px时加载一次
        let bottomOfWindow =
          document.documentElement.offsetHeight -
            document.documentElement.scrollTop -
            window.innerHeight <=
          100;
        if (bottomOfWindow && this.loading == false) {
          this.loading = true;
          if (!this.end) {
            this.loading = false;
            this.getFollowing(false, this.peopleid, 20, this.currentsize);
          } else {
            this.loading = false;
          }
        }
      };
    },

    changeFollow(isfollow, followeeid, index) {
      // 先判断是否已登录
      let isLogin = this.$store.state.isAuthenticated;
      let uid = this.$store.state.user.uid;
      if (isLogin) {
        if (!this.loading) {
          let action;
          if (!isfollow) {
            // 关注
            action = "/follow";
          } else {
            // 取消关注
            action = "/unfollow";
          }
          this.$axios
            .get(action, {
              params: {
                followerid: uid,
                followeeid: followeeid
              }
            })
            .then(res => {
              if (res.data.code == 0) {
                this.followings[index].isfollow = !this.followings[index]
                  .isfollow;
              }
              this.loading = false;
            })
            .catch(err => {
              console.log(err.response);
            });
        } else {
           return;
        }
      } else {
        // 弹出登录框
        this.$store.dispatch("setIsToLogin", true);
      }
    }
  },
  mounted() {
    this.getFollowing(true, this.peopleid, 20, this.currentsize);
    this.scroll();
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll);
  }
};
</script>

<style lang='scss'>
.followings_wrapper {
  padding-top: 1.2rem;
  // background-color: #ddd;
  .followings_list {
    border-bottom: 1px solid #eee;
    padding: 1rem 1.2rem 1rem;
    a {
      display: flex;
      flex-direction: row;
      justify-content: center;
      height: 4rem;
      align-items: center;
      color: #000;
      .followings_avatar {
        background-color: #eee;
        width: 3.5rem;
        height: 3.5rem;
        line-height: 3.5rem;
        text-align: center;
        border-radius: 4px;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .followings_info {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding-left: 2.5rem;
        justify-content: center;
        .followings_username {
          display: flex;
          flex: 1;
          font-size: 1.2rem;
        }
        .followings_email {
          display: flex;
          flex: 1;
          color: #b3b3b3;
        }
      }
      .followings_follow {
        width: 4.5rem;
      }
    }
  }
}
</style>